<template>
  <div class="page">
    <a-tabs class="tabs" v-model:activeKey="activeKey" @change="tabChange">
      <a-tab-pane key="Manage" tab="管理方案"></a-tab-pane>
      <a-tab-pane key="Follow" tab="随访表单"></a-tab-pane>
      <a-tab-pane key="Health" tab="健康教育"></a-tab-pane>
      <a-tab-pane key="Remind" tab="健康提醒"></a-tab-pane>
    </a-tabs>
    <div class="main">
      <Transition name="page" mode="out-in">
        <component class="content" :is="tabs[activeKey]"></component>
      </Transition>
    </div>
  </div>
</template>

<script lang="ts" setup name="模板管理">
import { onMounted } from 'vue'
import { setUrlParams } from '@/utils/tools'
import { useRoute } from 'vue-router'
import Manage from './Manage.vue'
import Follow from './Follow.vue'
import Health from './Health.vue'
import Remind from './Remind.vue'

const route = useRoute()

const tabs = {
  Manage,
  Follow,
  Health,
  Remind
}
const activeKey = ref('Manage')

const tabChange = (e) => {
  setUrlParams({
    key: e
  })
}

onMounted(() => {
  if (route.query.key) {
    activeKey.value = route.query.key
  }
})
</script>

<style lang="less" scoped>
.page {
  padding: 0;
  overflow: hidden;
}
.main {
  height: calc(100% - 48px);
  padding: 16px;
  overflow: hidden auto;
  .content {
    height: 100%;
    ::v-deep(.ant-card-body) {
      height: 100%;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }
  }
}
.tabs {
  width: 100%;
  background-color: #fff;
  ::v-deep(.ant-tabs-nav) {
    margin: 0;
  }
  ::v-deep(.ant-tabs-nav-wrap) {
    padding: 0 20px;
    padding-top: 2px;
    height: 48px;
  }
}
</style>
